<template>
  <form @submit="formSubmit" class='repair-form' report-submit>
    <div class="repairContainer">
          <div class='form-wrap'>
            <div class='info-wrap'>
                <div class='info-line' @click='selectGroup'>
                  <div class='info-label'><div v-if='state!=1'>接单组：</div><div>接单人：</div></div>
                  <div class='info-content'>
                    <div class='value'><div v-if='state!=1'>{{groupName}}</div><div>{{personName}}</div></div>
                    <div class='arrow-right' >
                      <i-icon type="enter" size="16" color="#c9d7db" />
                    </div>
                  </div>
                </div>
                <div class='info-line'>
                  <div class='info-label'>优先级：</div>
                  <div class='mr10'>
                    <i-switch :value="priority" size="large"  @change="onChangepriority" slot="footer">
                        <view slot="open">紧急</view>
                        <view slot="close">正常</view>
                    </i-switch>
                  </div>
                </div>
                <div class='info-line btn-line'>
                  <div class='info-label label-type'>类型：</div>
                  <div class='info-content'>
                    <div class='btn-line'>
                      <i-col span="8" v-for='(btn,index) in faultTypeList' :key='index'>
                        <button @click="changeFaultType(btn.id)" class='type-btn' :class='{active:faultTypeId==btn.id,m20:index>2}'>{{btn.name}}</button>
                      </i-col>
                    </div>
                  </div>
                </div> 
                <div class='info-line'>
                  <div class='info-label label-type'>预计工时：</div>
                  <div class='info-content'>
                    <i-input-number :value="useTime" max='100' min="0.5" step="0.5" @change="changeTime" />
                    <div class='info-label ml10'>小时</div>
                  </div>
                </div>
                <div class='info-line' @click='showDatePicker'>
                  <div class='info-label label-type'>开始时间：</div>
                  <div class='info-content'>
                    <div class='value'>{{pickerText}}</div>
                    <div class='arrow-right'>
                      <i-icon type="enter" size="16" color="#c9d7db" />
                    </div>
                  </div>
                </div>
                <div class='info-line'>
                  <div class='info-label label-type'>描述：</div>
                  <div class='info-content'>
                    <div class='desc-wrap'>
                      <textarea class='desc' v-model='comments'/>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          <i-row i-class='submit-line'>
              <button formType="submit" class='submit-btn'>派单</button>
          </i-row>
    </div>
    <mpvue-picker ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault" :themeColor="themeColor" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
    <i-toast id="toast" />
  </form>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
import { $Toast } from '@/../static/iview/base/index';
import mpvuePicker from 'mpvue-picker';
import moment from 'moment';
export default {
  data() {
    return {
      type:0,//0故障1巡检2维保
      state:0,//0派单1群发2二次派单3转单
      orderId:null,
      groupId:null,
      groupName:'',
      personName:'',
      priority:0,
      faultTypeId:'',
      faultTypeList:[],
      useTime:0.5,
      startTime:'',
      mode: 'selector',
      deepLength: 5,
      pickerValueDefault: [],// 初始化值
      pickerValueArray: [], // picker 数组值
      themeColor: '', // 颜色主题
      pickerText:moment(new Date()).format('YYYY/MM/DD HH:mm'),
      personList:[],
      personId:null,
      comments:''
    }
  },
  components: {
    mpvuePicker
  },
  computed:{
    ...mapState(['userInfo']),
    planStartTime(){
      return new Date(this.pickerText).getTime()
    }
  },
  beforeMount() {
    this.findFaultType()
  },
  onLoad(){
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
      var query = this.$root.$mp.query;
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      var params = currPage.data;
      if(query.projectId) this.projectId = query.projectId;
      if(query.orderId) this.orderId = query.orderId;
      if(query.type) this.type = query.type;
      if(query.state) this.state = query.state;
      if(query.faultTypeId) this.faultTypeId = query.faultTypeId;
      if(query.groupId) this.groupId = query.groupId;
      if(query.comments) this.comments = query.comments;
      if(query.groupId){
        this.groupId = query.groupId;
        this.groupName = query.groupName;
        this.personId = '';
        this.personName = '';
        //this.findPersons();
      }
      if(params.groupId){
        this.groupId = params.groupId;
        this.groupName = params.groupName;
        this.personId = '';
        this.personName = '';
        //this.findPersons();
      }
      if(query.groupId && query.groupId!='null'){
        this.groupId = query.groupId;
        this.groupName = query.groupName;
        //this.findPersons();
      }
      if(params.userList) this.userList = params.userList;
      if(params.personId) this.personId = params.personId;
      if(params.personName) this.personName = params.personName;
  },
  methods:{
    onChangepriority(event){
        const value = event.mp.detail.value;
        this.priority = value ? 1 : 0;
    },
    findFaultType(){
      this.$http.post({
        url:'/order/getAllFaultTypes',
        data:{
          ukey:this.userInfo.ukey,
        }
      }).then(res=>{
        if(res.s==0){
          this.faultTypeList = res.i.Data;
        }
      }).catch(e=>{
        console.log('获取失败')
      })
    },
    changeFaultType(type){
      this.faultTypeId = type
    },
    changeTime(event){
      const value = event.mp.detail.value;
      this.useTime = value;
    },
    showDatePicker() {
      this.pickerValueDefault = new Date();
      this.mode = 'dateTimeSelector';
      this.themeColor = '#4d92c2';
      this.$refs.mpvuePicker.show();
    },
    onChange(e) {
      console.log(e);
    },
    onCancel(e) {
      //console.log(e);
    },
    onConfirm(e) {
      if (this.mode === 'dateTimeSelector') {
        this.pickerText = moment(new Date(e.label)).format('YYYY/MM/DD HH:mm');
      }
    },
    selectGroup(){
      var state = this.state==1?1:0;
      let url = `/pages/receive_group/main?projectId=${this.projectId}&state=${state}`;
      if(this.state==2){
        url+=`&groupId=${this.groupId}&groupName=${this.groupName}`
      }
      if(this.state==3){
        url+=`&groupId=${this.groupId}&groupName=${this.groupName}`
      }
      wx.navigateTo({
        url
      })
    },
    findPersons(){
      this.$http.post({
        url:'/user/getGroupsByUser',
        data:{
          groupId:this.groupId,
          projectId:this.projectId
        }
      }).then(res=>{
        if(res.s==0){
          this.personList = res.i.Data;
          if(this.personList.length==0){
            this.personName = '';
            this.personId = null;
            $Toast({
                content:'无接单人员,请重新选择接单组'
            });
            return;
          }
        }
      }).catch(e=>{
        console.log('获取失败',e)
      })
    },
    selectPerson(){
      if(this.personList.length>0){
        /* wx.navigateTo({
         url:`/pages/receive_person/main?groupId=${this.groupId}&projectId=${this.projectId}`
        }) */
      }else{
        $Toast({
            content:'无接单人员,请重新选择接单组'
        });
      }
    },
    formSubmit(){
      if((this.state==0 || this.state==2) && !this.groupId){
        $Toast({
            content:'请先选择接单组'
        });
        return;
      }
      if(this.state==1 && this.userList.length==0){
        $Toast({
            content:'接单人不能为空'
        });
        return;
      }
      if(this.state==2 && !this.personId){
        $Toast({
            content:'接单人不能为空'
        });
        return;
      }
      var data = {
        ukey:this.userInfo.ukey,
        orderId:this.orderId,
        priority:this.priority,
        planStartTime:moment(new Date(this.planStartTime)).format('YYYY-MM-DD HH:mm:ss'),
        planUseTime:this.useTime,
        comment:this.comments
      }
      var url = '';
      if(this.type==0){
        data.faultTypeId = this.faultTypeId;
        if(this.state==0){
            var url = '/order/firstSendFaultOrder';
            data.groupId = this.groupId;
            if(this.personId) data.acceptUserId = this.personId;
        }else if(this.state==1){
            var url = '/order/multiSendFaultOrder';
            data.userList = this.userList;
        }else if(this.state==2){
            var url = '/order/secondSendFaultOrder';
            data.groupId = this.groupId;
            if(this.personId) data.acceptUserId = this.personId;
        }else if(this.state==3){
          url = '/order/turnFaultOrder';
          data.groupId = this.groupId;
          if(this.personId) data.acceptUserId = this.personId;
        }
      }else if(this.type==1){
        if(this.state==0){
          url = '/order/firstSendInspectOrder';
        }else if(this.state==2){
          url = '/order/secondSendInspectOrder';
        }
        data.groupId = this.groupId;
        if(this.personId) data.acceptUserId = this.personId;
      }else if(this.type==2){
        if(this.state==0){
          url = '/order/firstSendMaintenanceOrder';
        }else if(this.state==2){
          url = '/order/secondSendMaintenanceOrder';
        }
        data.groupId = this.groupId;
        if(this.personId) data.acceptUserId = this.personId;
      }else if(this.type==3){
        if(this.state==0){
          url = '/order/firstSendAffairOrder'
        }else if(this.state==2){
          url = '/order/secondSendAffairOrder'
        }else if(this.state==3){
          url = '/order/turnFaultOrder'
        }
        data.groupId = this.groupId;
        if(this.personId) data.acceptUserId = this.personId;
      }
      this.$http.post({
        url,
        data
      }).then(res=>{
        if(res.s==0){
           $Toast({
              content:'派单成功'
           });
           let pages = getCurrentPages();
           let prevPage = pages[pages.length - 3];
           prevPage.setData({
             orderId:this.orderId
           }) 
           wx.navigateBack({delta:2})
        }
      }).catch(e=>{
        console.log('获取失败',e)
      })
    }
  }
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.repair-form{
  height: 100%;
  .repairContainer{
      height: 100%;
      display: flex;
      flex-direction:column ;
      .form-wrap{
        flex:1;
        height: 50rpx;
        .info-wrap{
          margin:20rpx;
          border:1px solid #ddd;
          border-radius:8rpx;
          background: #fff;
          display: flex;
          flex-direction: column;
          .info-line{
            display: flex;
            justify-content:space-between;
            line-height:60rpx;
            padding:10rpx  20rpx;
            border-bottom:1px solid #dfe3e5;
            font-size:30rpx;
            .arrow-right{
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            &.btn-line{
              padding: 20rpx
            }
            &:last-child{
              border-bottom:none 
            }
            .info-label{
              color: #8a8a8a;
              &.ml10{
                margin-left:10rpx;
              }
            }
            .info-content{
              flex:1;
              display: flex;
              justify-content: flex-end;
              overflow: hidden;
              width: 80%;
              .btn-line{
                width:90%;
                margin: 20rpx;
              }
              .value{
                flex:1;
                color:#338ed4;
                width: 80%;
                div{
                  width: 100%;
                  height: 60rpx;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              .type-btn{
                height: 54rpx;
                line-height: 54rpx;
                border:2rpx solid #e7e7e9;
                border-radius:44rpx;
                font-size:26rpx;
                padding:0;
                background: #fff;
                margin-right:16rpx;
                &.m20{
                  margin-top: 16rpx;
                }
                &::after{
                  border: none
                }
                &.active{
                  border:2rpx solid #4d92c2!important;
                  color:#338ed4!important;
                }
              }
              .desc-wrap{
                display: flex;
                width: 100%
              }
              .desc{
                flex:1;
                padding:0 16rpx;
                height:140rpx;
                color: #8a8a8a;
              }
            }
          }
        }
      }
      .submit-line{
        margin:50rpx 0; 
        .submit-btn{
          width:70%;
          background: #1380d3;
          color:#fff!important;
          font-size:36rpx;
          border-radius:40rpx; 
          height: 80rpx;
          line-height: 80rpx;
        }
      }
  } 
}
</style>
